<template>
  <div id="img-num-say" :class="{ h5: this.$store.state.webType === 'h5' }">
    <el-row :span="24" class="page">
      <!-- 面包屑 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">{{ $t("home") }} </el-breadcrumb-item>
        <el-breadcrumb-item>{{ $t("sections") }}</el-breadcrumb-item>
        <el-breadcrumb-item>{{ $t("brief") }}</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- {{$t('numbers')}} -->
      <div class="num-say">
        <div class="say-title">
          <div class="say-label">
            {{ $t("numbers") }}<img src="@/assets/images/label-icon.png" />
          </div>
          <div class="art-tab">
            <div
              class="tab-item"
              @click="changeNumLabel('', '')"
              :class="{ active: currentNumLabel == '' }"
            >
              {{ $t("all") }}
            </div>
            <template v-if="labelNumData && labelNumData.length > 0">
              <div
                class="tab-item"
                @click="changeNumLabel(item.id, item.label)"
                :class="{ active: currentNumLabel == item.label }"
                v-for="(item, index) in labelNumData"
                :key="index"
              >
                {{ item.label }}
              </div>
            </template>
            <!-- 右侧切换视图和总条数 -->
            <div class="tab-info">
              <div class="info-total">
                {{
                  $t("results").length > 6 ? numTotal + "  " + $t("results") : `共 ${numTotal} 条`
                }}
              </div>
            </div>
          </div>
        </div>
        <div class="num-content">
          <template v-for="(num, ndx) in numSayData">
            <!-- <div class="content-item" :key="ndx" v-if="ndx < 12 || numShowAll"> -->
            <div class="content-item" :key="ndx">
              <div @click="handleDrawerShow(num)">
                <span
                  v-if="$store.state.lang == 'CN'"
                  style="font-weight: 500; font-size: 14px; padding-right: 10px; width: 87px"
                  >{{ num.peridos }}</span
                >
                <div
                  v-else
                  style="font-weight: 500; font-size: 14px; padding-right: 10px; width: 87px"
                >
                  {{ num.peridos }}
                </div>
                <p>{{ num.title }}</p>
              </div>
            </div>
          </template>
          <!-- <div
            class="num-show"
            @click="numShowAll = true"
            v-if="numSayData.length > 12 && !numShowAll"
          >
            {{ $t('more') }} <i class="el-icon-arrow-down"></i>
          </div>
          <div
            class="num-show"
            @click="numShowAll = false"
            v-if="numSayData.length > 12 && numShowAll"
          >
            {{ $t('showLess') }} <i class="el-icon-arrow-up"></i>
          </div> -->
          <div class="num-show" @click="clickShowMore" v-if="!numShowAll">
            {{ $t("more") }} <i class="el-icon-arrow-down"></i>
          </div>
          <div class="num-show" @click="clickShowLess" v-if="numShowAll">
            {{ $t("showLess") }} <i class="el-icon-arrow-up"></i>
          </div>
        </div>
        <!-- <div class="num-content" v-if="$store.state.webType === 'h5'">
          <i class="click-icon el-icon-caret-left" @click="swipeRight"></i>
          <i
            class="click-icon icon2 el-icon-caret-right"
            @click="swipeLeft"
          ></i>
          <template v-for="(num, ndx) in numSayData">
            <v-touch
              @swipeleft="swipeLeft"
              @swiperight="swipeRight"
              :swipe-options="{ direction: 'horizontal' }"
              style="width: 100%"
            >
              <div class="content-item" :key="ndx" v-if="currentIndex === ndx">
                <div @click="handleDrawerShow(num, index)">{{num.title}}</div>
              </div>
            </v-touch>
          </template>
        </div> -->
      </div>

      <!-- {{$t('pictures')}} -->
      <div class="say-row">
        <div class="say-title">
          <div class="say-label">
            {{ $t("pictures") }}<img src="@/assets/images/label-icon.png" />
          </div>
          <!-- 文章label的tab -->
          <div class="art-tab">
            <div
              class="tab-item"
              @click="changeLabel('', '')"
              :class="{ active: currentLabel == '' }"
            >
              {{ $t("all") }}
            </div>
            <template v-if="labelData && labelData.length > 0">
              <div
                class="tab-item"
                @click="changeLabel(item.id, item.label)"
                :class="{ active: currentLabel == item.label }"
                v-for="(item, index) in labelData"
                :key="index"
              >
                {{ item.label }}
              </div>
            </template>
            <!-- 右侧切换视图和总条数 -->
            <div class="tab-info">
              <div class="info-total">
                {{
                  $t("results").length > 6 ? listTotal + "  " + $t("results") : `共 ${listTotal} 条`
                }}
              </div>
              <div class="toggle-img" @click="viewTypeChange('img')">
                <img
                  v-if="currentView !== 'img'"
                  src="@/assets/images/use/art-view01.png"
                  title="图文列表"
                />
                <img
                  v-if="currentView === 'img'"
                  src="@/assets/images/use/art-view11.png"
                  title="图文列表"
                />
              </div>
              <div class="toggle-text" @click="viewTypeChange('text')">
                <img
                  v-if="currentView !== 'text'"
                  src="@/assets/images/use/art-view02.png"
                  title="文字列表"
                />
                <img
                  v-if="currentView === 'text'"
                  src="../assets/images/use/art-view22.png"
                  title="文字列表"
                />
              </div>
            </div>
          </div>
        </div>
        <infinite-scroll class="infinite" @loadBottom="loadMore">
          <div
            class="art-view"
            v-masonry
            :horizontal-order="true"
            transition-duration="0s"
            item-selector=".art-item"
            :fit-width="false"
            :gutter="gutterWidth"
            :class="{ text: currentView === 'text' }"
            style="height: auto"
          >
            <template v-if="currentView === 'img'">
              <div
                class="art-item scale-view"
                v-masonry-tile
                v-for="(img, idx) in artData"
                :key="idx"
                @click="$goDetail(img.id)"
              >
                <img :src="img.imgUrl" :alt="img.title" />
                <div class="say-content bg-half">
                  <div class="item-title">
                    {{ img.title }}
                  </div>
                  <div class="item-info">
                    <div
                      class="info-label"
                      v-if="img.label && img.label.length > 0 && $store.state.lang === 'CN'"
                    >
                      {{ currentLabel ? currentLabel : img.label[0] }}
                    </div>
                    <div class="info-time">{{ img.peridos }}</div>
                  </div>
                  <!-- <div class="item-content two-line">{{img.content}}</div> -->
                </div>
              </div>
            </template>
            <template v-else>
              <div
                class="art-item"
                v-masonry-tile
                @click="$goDetail(img.id)"
                v-for="(img, idx) in artData"
                :key="idx"
              >
                <div class="art-content">
                  <div class="item-title">
                    {{ img.title }}
                    <div class="item-info">
                      <div
                        class="info-label"
                        v-if="img.label && img.label.length > 0 && $store.state.lang === 'CN'"
                      >
                        {{ currentLabel ? currentLabel : img.label[0] }}
                      </div>
                      <div class="info-time">{{ img.peridos }}</div>
                    </div>
                  </div>
                  <div class="item-content">{{ img.content }}</div>
                </div>
              </div>
            </template>
            <div class="more-line">
              <div v-if="listQuery.pageNum < maxPage" class="art-more true" @click="getListMore()">
                {{ $t("more2") }} >
              </div>
              <div v-else class="art-more none">{{ $t("noMore") }}</div>
            </div>
            <!-- <div class="say-title">{{artData.title}}</div> -->
          </div>
        </infinite-scroll>
      </div>
    </el-row>

    <el-drawer
      :title="drawerTitle"
      :visible.sync="drawer"
      direction="btt"
      :before-close="handleClose"
      :custom-class="'num-drawer'"
    >
      <img class="num-img" :src="numImg" :alt="drawerTitle" />
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: "ImgNumSay",
  data() {
    return {
      numShowAll: false,
      nomore: false,
      busy: true,
      gutterWidth: 20,
      drawer: false,
      drawerTitle: "",
      numImg: "",
      numSayData: [],
      currentIndex: 0,
      // {{$t('latest')}}
      bookData: {},
      // 热点文章
      articleData: [],
      // 当前文章列表展示形式
      currentView: "img",
      // 文章列表
      artData: [],
      // 文章总数量
      listTotal: 0,
      maxPage: 1,
      // 文章列表请求信息
      listQuery: {
        columnId: "",
        labelId: "",
        pageSize: 12,
        pageNum: 1,
      },
      // 标签
      labelData: [],
      currentLabel: "",
      /*********************** */
      // 文章列表请求信息
      numQuery: {
        columnId: 13,
        labelId: "",
        pageSize: 12,
        pageNum: 1,
      },
      // 标签
      labelNumData: [],
      currentNumLabel: "",
      numTotal: 0,
    };
  },
  mounted() {
    if (this.$route.query.token) {
      sessionStorage.setItem("token", this.$route.query.token);
    }
    this.numQuery.columnId = this.$store.state.lang === "CN" ? 13 : 39;
    this.listQuery.columnId = this.$getPartId(this.$route.path);
    this.listQuery.menuId = this.$getMenuId(this.$route.path);
    this.listTotal = 0;
    this.maxPage = 1;
    this.getList();
    this.getNumList();
    this.getNumLabels();
    this.getLabels();
  },
  methods: {
    clickShowLess() {
      this.numQuery.pageSize = 12;
      this.$get(this.$api + "/cms/web/selsctWeb", this.numQuery).then((res) => {
        this.numSayData = res.data;
        this.numTotal = res.total;
        this.numShowAll = false;
      });
    },
    clickShowMore() {
      this.numQuery.pageSize = this.numQuery.pageSize + 9;
      this.$get(this.$api + "/cms/web/selsctWeb", this.numQuery).then((res) => {
        this.numSayData = res.data;
        this.numTotal = res.total;
        if (this.numQuery.pageSize > res.total) {
          this.numShowAll = true;
        }
      });
    },
    // 左滑
    swipeLeft() {
      //  console.log('左滑');
      if (this.currentIndex < this.numSayData.length - 1) {
        this.currentIndex += 1;
      } else {
        this.currentIndex = 0;
      }
      // 页面跳转或其它操作
    },
    //
    swipeRight() {
      //  console.log('右滑');
      if (this.currentIndex == 0) {
        this.currentIndex = this.numSayData.length - 1;
      } else {
        this.currentIndex -= 1;
      }
      // 页面跳转或其它操作
    },
    handleDrawerShow(item) {
      // if (item.detailHtml && item.detailHtml.length > 10) {
      this.$goDetail(item.id);
      // } else {
      //   this.drawer = true;
      //   this.drawerTitle = item.title;
      //   this.numImg = item.imgUrl;
      // }
    },
    handleClose(done) {
      done();
    },
    async loadMore() {
      if (this.busy || this.listQuery.pageNum >= this.maxPage) return;
      this.busy = true;
      this.listQuery.pageNum += 1;
      await this.getList();
    },
    async getList() {
      await this.$get(this.$api + "/cms/web/selsctWeb", this.listQuery).then((res) => {
        this.artData = [...this.artData, ...res.data];
        this.listTotal = res.total;
        this.maxPage = res.maxPage;
        // this.busy = false;
        let that = this;
        this.$nextTick(() => {
          that.nomore = true;
          setTimeout(() => {
            that.busy = false;
          }, 300);
        });
      });
    },
    viewTypeChange(type) {
      this.artData = [];
      this.listQuery.pageNum = 1;
      this.getList();
      this.currentView = type;
      this.$nextTick(() => {
        this.$redrawVueMasonry();
      });
    },
    getLabels() {
      this.$get(this.$api + "/cms/web/getLabelByPartId", {
        partId: this.listQuery.columnId,
      }).then((res) => {
        this.labelData = res.data;
      });
    },
    changeLabel(id, label) {
      this.listQuery.labelId = id;
      this.listQuery.pageNum = 1;
      this.currentLabel = label;
      this.artData = [];
      this.getList();
    },
    getListMore() {
      this.listQuery.pageNum += 1;
      this.getList();
    },
    /****************************************************** */
    getNumList() {
      this.$get(this.$api + "/cms/web/selsctWeb", this.numQuery).then((res) => {
        this.numSayData = res.data;
        this.numTotal = res.total;
      });
    },

    changeNumLabel(id, label) {
      this.numQuery.labelId = id;
      this.numQuery.pageNum = 1;
      this.currentNumLabel = label;
      this.numQuery.pageSize = 12;
      this.numShowAll = false;
      this.numSayData = [];
      this.getNumList();
    },
    getNumLabels() {
      this.$get(this.$api + "/cms/web/getLabelByPartId", {
        partId: this.numQuery.columnId,
      }).then((res) => {
        this.labelNumData = res.data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
#img-num-say {
  position: relative;
  width: 100%;
  // max-height: 100vh;
  // overflow: auto;
  // &::-webkit-scrollbar {
  //   display: none;
  // }
  ::v-deep .num-drawer {
    height: fh(800vh, pc) !important;
    background-color: rgba(46, 46, 46, 0.8);

    .el-icon-close:before {
      color: #fff;
    }

    .num-img {
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      width: 100%;
    }
  }

  &::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: url("../assets/images/say-bg.png") no-repeat;
    background-size: 100% auto;
    background-position: center 0;
  }

  .page {
    min-height: 800px;
    padding: fh(152vh, pc) fw(80vw, pc) fh(40vh, pc) fw(80vw, pc);
    background: #fff;

    ::v-deep .el-breadcrumb {
      .el-breadcrumb__inner {
        font-weight: bold;
        color: #fff !important;
        font-size: fh(18vh, pc);
      }
    }

    .more-line {
      width: 100%;

      .art-more {
        width: max-content;
        margin: 0 auto;
        color: rgba(251, 254, 255, 0.8);
        font-size: fh(14vh, pc);

        &.true:hover {
          cursor: pointer;
          opacity: 0.8;
          color: $zh;
        }

        &.none {
          opacity: 0.5;
        }
      }
    }

    .say-title {
      display: flex;
      align-items: center;
      width: 100%;
      padding: fh(40vh, pc) fw(40vw, pc);
      padding-bottom: fh(28vh, pc);
      border-bottom: 1px solid #fff;

      .say-label {
        color: $zh;
        position: relative;
        font-size: fh(24vh, pc);
        font-weight: 800;
        // margin-top: fh(20vh, pc);
        margin-right: fh(80vh, pc);
        // padding-left: fw(20vw, pc);
        img {
          position: absolute;
          bottom: fh(-12vh, pc);
          right: fw(-10vw, pc);
          width: fw(42vw, pc);
        }
      }

      .art-tab {
        flex: 1;
        display: flex;
        align-items: center;
        color: $sh;

        .tab-info {
          margin-left: auto;
          display: flex;
          align-items: center;

          .toggle-img {
            margin-left: fh(62vw, pc);
            margin-right: fh(24vw, pc);
          }

          img {
            width: fw(20vw, pc);
            cursor: pointer;
          }
        }

        .tab-info {
          margin-left: auto;
          display: flex;
          align-items: center;

          .toggle-img {
            margin-left: fh(62vw, pc);
            margin-right: fh(24vw, pc);
          }

          img {
            width: fw(20vw, pc);
            cursor: pointer;
          }
        }

        .tab-item {
          margin-right: fw(60vw, pc);
          font-size: fh(16vh, pc);
          position: relative;
          line-height: fh(30vh, pc);

          &:hover {
            color: $sh;
            cursor: pointer;
          }

          &.active {
            font-size: fh(20vh, pc);
            font-weight: bold;
            color: $sh;

            &::before {
              content: "";
              position: absolute;
              bottom: fh(-14vh, pc);
              width: 100%;
              border-top: fh(6vh, pc) solid $zh;
            }
          }
        }
      }
    }
  }

  .say-row {
    .art-view {
      &.text {
        .art-item {
          width: 100%;
          margin-bottom: fh(20vh, pc);

          &:hover {
            opacity: 0.9;
          }
        }

        .art-content {
          width: 100%;
          color: rgba(251, 254, 255, 0.8);
          padding: fh(20vh, pc) fw(20vw, pc);
          position: relative;
          z-index: 2;
          background-color: $dh;

          .item-title {
            color: $sh;
            font-size: fh(16vh, pc);
            line-height: fh(22vh, pc);
            margin-bottom: fh(8vh, pc);
            font-weight: 600;
          }

          .item-info {
            display: flex;
            align-items: center;
            justify-content: space-between;
            // margin-bottom: fh(12vh, pc);
            font-size: fh(14vh, pc);
            line-height: fh(20vh, pc);

            .info-time {
              color: #a1b8bd;
              margin-left: auto;
            }
          }

          .item-content {
            font-size: fh(14vh, pc);
            line-height: fh(20vh, pc);
            font-weight: 400;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }

        .item-title {
          color: $sh;
          display: flex;
          width: 100%;

          .item-info {
            padding-left: fw(40vw, pc);
            margin-left: auto;
            width: max-content !important;

            .info-label {
              margin-right: fw(20vw, pc);
              width: max-content !important;
            }

            .info-time {
              width: max-content;
              margin-left: fw(20vw, pc) !important;
            }
          }
        }
      }

      .art-item {
        width: calc((100% - 60px) / 4);
        float: left;
        position: relative;
        margin-bottom: fh(20vh, pc);

        img {
          width: 100%;
        }

        .say-content {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          color: #fff;
          padding: fh(20vw, pc) fw(20vw, pc);
          padding-bottom: fh(6vw, pc);
          box-shadow: 0px -70px 19px 6px rgba(15, 0, 0, 0.3) inset;

          .item-info {
            display: flex;
            align-items: center;
            width: 100%;
            justify-content: space-between;
            color: #fbfeff;
            font-size: fh(14vh, pc);
            line-height: fh(16vh, pc);

            .info-time {
              color: #a1b8bd;
              margin-left: auto;
            }
          }

          .item-title {
            color: #fbfeff;
            font-size: fh(20vh, pc);
            font-weight: 600;
            line-height: fh(30vh, pc);
            height: fh(60vh, pc);
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
          }

          .item-content {
            font-size: fh(14vh, pc);
            line-height: fh(20vh, pc);
            font-weight: 400;
            height: fh(40vh, pc);
          }
        }
      }
    }
  }

  .num-say {
    background: #f6f6f6;
    margin-top: fh(14vh, pc);

    .say-title {
      border-color: rgba(0, 0, 0, 0.2);
      border-width: 2px;
    }

    .num-content {
      padding: fh(40vh, pc) fw(20vw, pc);
      display: flex;
      align-items: flex-start;
      flex-wrap: wrap;

      .num-show {
        width: 100%;
        color: rgba(15, 0, 0, 0.5);
        cursor: pointer;
        text-align: center;
        margin: 0 auto;

        &:hover {
          color: $sh;
        }
      }

      .content-item {
        width: 33.33%;
        font-size: fh(16vh, pc);
        font-weight: bold;
        color: $sh;
        line-height: fh(24vh, pc);
        padding: 0 fw(10vw, pc);
        padding-bottom: fh(30vh, pc);
        text-align: left;

        > div:hover {
          cursor: pointer;
          color: $zh;
        }
        > div {
          display: flex;
          align-items: flex-start;
          > div {
            width: 8vw;
          }
          > span {
            width: 5vw;
          }
          p {
            flex: 1;
          }
        }

        &:nth-child(4n + 0) {
          > div {
            // width: max-content;
            // margin: 0 auto;
          }

          // text-align: right;
        }

        &:nth-child(4n + 1),
        &:nth-child(1) {
          text-align: left;
        }
      }
    }
  }
}

#img-num-say.h5 {
  ::v-deep .num-drawer {
    height: 100vh !important;
    top: 0 !important;

    .num-img {
      // position: absolute;
      // top: 0;
      // left: 0;
      // transform: translateX(-25%) translateY(-50%) rotate(90deg);
      // width: 80vh;
    }
  }

  .page {
    .art-view {
      .item-info {
        margin-bottom: 0 !important;
      }

      .item-content {
        display: none;
      }

      .art-item {
        width: calc(50% - 10px);
      }
    }

    .num-say {
      .num-content {
        position: relative;
        padding: fw(20vw, h5);
        padding-bottom: fh(20vh, h5);

        .num-show {
          font-size: 13px;
        }

        .click-icon {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          left: 0px;
          width: 30px;
          height: 30px;
          line-height: 30px;
          color: #fff;
          border-radius: 50%;
          text-align: center;
          font-size: 18px;
          // background-color: rgba(0, 0, 0, 0.37);
          &.icon2 {
            left: auto;
            right: 0px !important;
          }
        }

        .content-item {
          padding: 0;
          width: 100%;
          text-align: left !important;
          margin-bottom: 14px;
          font-size: 14px;
          line-height: 20px;
        }
      }
    }

    .say-title {
      .tab-info {
        font-size: fh(12vh, h5);
      }

      .say-label {
        font-size: fh(18vh, h5);
        margin-right: fh(40vw, h5);

        img {
          width: fw(22vw, h5);
          bottom: fh(-6vh, h5);
          right: fw(-6vw, h5);
        }
      }

      .art-tab .tab-item {
        font-size: fh(14vh, h5);

        &.active {
          font-size: fh(16vh, h5);
        }
      }
    }
  }
}

.h5#img-num-say .say-row .art-view.text {
  .art-item {
    width: 100%;
  }
}

.h5#img-num-say .say-row .art-view .art-item .say-content {
  .item-title {
    color: $sh;
    font-size: 14px;
    line-height: 20px;
    height: 38px;
  }

  .item-info {
    font-size: 12px;
    line-height: 12px;
    margin-top: 4px;

    .info-time {
      margin: 4px 0;
      margin-left: auto;
    }
  }
}
</style>
